<template>
	<view class="container">
		<view class="top_bg">
			<view class="nav_header">
				<image @click="handleGoback" class="back_img" src="../../static/image/left.png"></image>
			</view>
			<image class="bg_image" src="../../static/image/top_img.png"></image>
			<view class="head_content">
				<view class="top_content">
					<scroll-view class="bottom-box" scroll-x="true" :scroll-left="scrollLeft">
						<view @click="handleClick(item, index)" :class="activeI === index ? 'vip-pay' : 'vip-nopay'"
							v-for="(item, index) in listType" :key="index">
							<view class="top_img">
								<image :src="item.img" class="img_top"></image>
							</view>
							<view class="bottom_text font-bold padding-tb-16" :class="activeText == item.title ? 'isActiveText' : 'isNormalText' ">{{ item.title }}</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>
		<c_happy_eight :parentDataEight="sonlistNumber" v-show="showTitle === '快乐8'" />
		<c_lucky_lottery_3D v-show="showTitle === '福彩3D'" />
		<c_colorful_music :parentColorfulMusic="colorfulmusicData" v-show="showTitle === '七彩乐'" />
		<c_arrange_three  :parentlistDatathree="sonThreeNumber" v-show="showTitle === '排列三'" />
		<c_arrange_five  :parentlistData="sonFiveNumber" v-show="showTitle === '排列五'" />
		<c_seven_start_color v-show="showTitle === '七星彩'" />
		<c_grand_lotto :parentlistglData="grandlottoNumber" v-show="showTitle === '大乐透'" />
		<c_union_lotto :parentunionlottoData="unilottoNumber" v-show="showTitle === '双色球'" />
	</view>
</template>

<script>
	import c_happy_eight from '../common/components/happyEight.vue'
	import c_lucky_lottery_3D from '../common/components/LuckyLottery3D.vue'
	import c_colorful_music from '../common/components/Colorfulmusic.vue'
	import c_arrange_three from '../common/components/Arrangethree.vue'
	import c_arrange_five from '../common/components/Arrangefive.vue'
	import c_seven_start_color from '../common/components/SevenStarColor.vue'
	import c_grand_lotto from '../common/components/GrandLotto.vue'
	import c_union_lotto from '../common/components/unionlotto.vue'
	export default {
		components: {
			c_happy_eight,
			c_lucky_lottery_3D,
			c_colorful_music,
			c_arrange_three,
			c_arrange_five,
			c_seven_start_color,
			c_grand_lotto,
			c_union_lotto
		},
		data() {
			return {
				activeText:'双色球',
				scrollLeft:0,
				chooseTypeID: 0,
				sonlistNumber:[],
				sonThreeNumber:[],
				sonFiveNumber:[],
				grandlottoNumber:[],
				colorfulmusicData:[],
				unilottoNumber:[],
				listType: [{
						id: 1,
						img: require('../../static/image/doubleball.png'),
						title: '双色球'
					},
					{
						id: 3,
						img: require('../../static/image/happyeight.png'),
						title: '快乐8'
					},
					{
						id: 2,
						img: require('../../static/image/threeD.png'),
						title: '福彩3D'
					},
					{
						id: 4,
						img: require('../../static/image/seven.png'),
						title: '七彩乐'
					},
					{
						id: 5,
						img: require('../../static/image/lt.png'),
						title: '大乐透'
					},
					{
						id: 6,
						img: require('../../static/image/sevenxic.png'),
						title: '七星彩'
					},
					{
						id: 8,
						img: require('../../static/image/plthree.png'),
						title: '排列三'
					},
					{
						id: 7,
						img: require('../../static/image/plfive.png'),
						title: '排列五'
					}
				],
				showTitle: '双色球',
				delindex: '',
				activeI: 0,
			};
		},
		onLoad(options) {
			if(options.lotterylist === undefined) {
				return
			}
			this.showTitle = options.showTypeText
			this.activeText = options.showTypeText
			let newParams = JSON.parse(decodeURIComponent(options.lotterylist))
			let nextParams = JSON.parse(newParams)
			this.sonlistNumber = nextParams.data.list
			this.sonThreeNumber = nextParams.data.list
			this.sonFiveNumber = nextParams.data.list
			this.grandlottoNumber = nextParams.data.list
			this.colorfulmusicData = nextParams.data.list
			this.unilottoNumber = nextParams.data.list
			if(options.showTypeText == "双色球"){
				this.scrollLeft = 0
			}
			if(options.showTypeText == "快乐8"){
				this.scrollLeft = 0
			}
			if(options.showTypeText == "福彩3D"){
				this.scrollLeft = 0
			}
			if(options.showTypeText == "七彩乐"){
				this.scrollLeft = 0
			}
			if(options.showTypeText == "排列三"){
				this.scrollLeft = 320
			}
			if(options.showTypeText == "排列五"){
				this.scrollLeft = 320
			}
			if(options.showTypeText == "七星彩"){
				this.scrollLeft = 320
			}
			if(options.showTypeText == "大乐透"){
				this.scrollLeft = 320
			}
			
			this.activeText = options.showType - 1
		},
		methods: {
			handleGoback(){
				uni.navigateBack()
			},
			handleClick(item, index) {
				this.chooseTypeID = item.id
				this.activeText = item.title
				this.showTitle = item.title
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $bg_color;
	}

	.container {
		width: 100%;
		@include flexBox(column);

		.top_bg {
			width: 100%;
			height: 184px;
			box-sizing: border-box;
			position: relative;

			.bg_image {
				width: 100%;
				height: 184px;
			}

			.nav_header {
				width: 100%;
				height: 44px;
				box-sizing: border-box;
				padding-left: 15px;
				position: absolute;
				top: 30px;
				z-index: 999;

				.back_img {
					width: 16px;
					height: 16px;
					margin-top: 15px;
				}
			}

			.head_content {
				width: 346px;
				background-color: $white_color;
				border-radius: $radius_eight;
				position: absolute;
				top: 100px;
				left: calc(50% - 173px);

				.top_content {
					width: 95%;
					height: 110px;
					margin: 0 auto;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;

					.top_all {
						flex: 0.25;

						.top_img {
							width: 100%;
							height: 80px;
							@include centerAline();

							.img_top {
								width: 60px;
								height: 60px;
							}
						}

						.bottom_text {
							width: 100%;
							height: 30px;
							text-align: center;
							font-size: $font-size-12;
							color: $black_color;
							
						}
					}

					.bottom-box {
						white-space: nowrap;

						.top_img {
							width: 100%;
							height: 80px;
							@include centerAline();

							.img_top {
								width: 60px;
								height: 60px;
							}
						}

						.bottom_text {
							width: 100%;
							height: 30px;
							text-align: center;
							font-size: $font-size-12;
							color: $black_color;
						}
						.isNormalText{
							color: $black_color;
						}
						.isActiveText{
							font-size: $font-size-14;
							font-weight: bold;
							color: $primary_color;
						}

						.vip-pay {
							color: #5b2d00;
							display: inline-block;
							width: 80px;
							height: 110px;
							text-align: center;
							margin-right: 20;

							.delete {
								text-decoration: line-through;
							}
						}

						.vip-nopay {
							color: red;
							display: inline-block;
							width: 80px;
							height: 110px;
							text-align: center;
							margin-right: 20;

							.delete {
								color: 999;
								text-decoration: line-through;
							}
						}
					}
				}

			}
		}

		// .next_content {
		// 	width: 346px;
		// 	margin: 0 auto;
		// 	margin-top: 40px;
		// 	margin-bottom: 20px;
		// 	box-sizing: border-box;
		// 	padding: 10px;
		// 	background-color: $white_color;
		// 	border-radius: $radius_eight;

		// 	.next_top {
		// 		width: 100%;
		// 		height: 45px;
		// 		display: flex;

		// 		.next_top_left {
		// 			flex: 0.3;

		// 			.left_btn {
		// 				width: 88px;
		// 				height: 32px;
		// 				border: 1px solid $primary_color;
		// 				text-align: center;
		// 				line-height: $line-height-32;
		// 				color: $primary_color ;
		// 				border-radius: $radius_16;
		// 			}

		// 			.left_change_btn {
		// 				width: 88px;
		// 				height: 32px;
		// 				border: 1px solid $primary_color;
		// 				text-align: center;
		// 				line-height: $line-height-32;
		// 				color: $white_color ;
		// 				border-radius: $radius_16;
		// 				background: linear-gradient(to right, #FF5A43, #FA2450)
		// 			}
		// 		}

		// 		.next_top_right {
		// 			flex: 0.7;
		// 			text-align: right;
		// 			line-height: $line-height-32;
		// 			font-weight: bold;
		// 			color: $primary_color;
		// 		}
		// 	}

		// 	.red_ball {
		// 		width: 100%;
		// 		height: 30px;
		// 		line-height: $line-height-30;
		// 		font-size: $font-size-14;
		// 		box-sizing: border-box;
		// 		padding-left: 10px;
		// 		color: $primary_color;

		// 		.red_more {
		// 			margin-left: 5px;
		// 			color: $gray_color;
		// 		}
		// 	}

		// 	.red_list {
		// 		width: 100%;
		// 		display: flex;
		// 		flex-wrap: wrap;

		// 		.isRedactive {
		// 			width: 27px;
		// 			height: 27px;
		// 			border-radius: 50%;
		// 			margin-left: 10px;
		// 			margin-top: 10px;
		// 			text-align: center;
		// 			line-height: 27px;
		// 			color: $white_color;
		// 			font-weight: bold;
		// 			font-size: $font-size-12;
		// 			background-image: url('../../static/image/red_ball.png');
		// 			background-size: 100% 100%;

		// 		}

		// 		.isNormalRed {
		// 			width: 25px;
		// 			height: 25px;
		// 			border-radius: 50%;
		// 			background-color: $qgray_color;
		// 			border: 1px solid $gray_color;
		// 			margin-left: 10px;
		// 			margin-top: 10px;
		// 			text-align: center;
		// 			line-height: $line-height-25;
		// 			color: $black_color;
		// 			font-weight: bold;
		// 			font-size: $font-size-12;
		// 		}

		// 		.isUnionactive {
		// 			width: 27px;
		// 			height: 27px;
		// 			border-radius: 50%;
		// 			margin-left: 10px;
		// 			margin-top: 10px;
		// 			text-align: center;
		// 			line-height: 27px;
		// 			color: $white_color;
		// 			font-weight: bold;
		// 			font-size: $font-size-12;
		// 			background-image: url('../../static/image/z_text_ball.png');
		// 			background-size: 100% 100%;
		// 		}
		// 	}

		// 	.red_blue {
		// 		width: 100%;
		// 		height: 30px;
		// 		line-height: $line-height-30;
		// 		font-size: $font-size-14;
		// 		box-sizing: border-box;
		// 		padding-left: 10px;
		// 		margin-top: 10px;
		// 		color: blue;

		// 		.red_more {
		// 			margin-left: 5px;
		// 			color: $gray_color;
		// 		}
		// 	}

		// 	.blue_list {
		// 		width: 100%;
		// 		display: flex;
		// 		flex-wrap: wrap;

		// 		.isblueactive {
		// 			width: 27px;
		// 			height: 27px;
		// 			border-radius: 50%;
		// 			margin-left: 10px;
		// 			margin-top: 10px;
		// 			text-align: center;
		// 			line-height: 27px;
		// 			color: $white_color;
		// 			font-weight: bold;
		// 			font-size: $font-size-12;
		// 			background-image: url('../../static/image/blue_ball.png');
		// 			background-size: 100% 100%;

		// 		}

		// 		.isNormalblue {
		// 			width: 25px;
		// 			height: 25px;
		// 			border-radius: 50%;
		// 			background-color: $qgray_color;
		// 			border: 1px solid $gray_color;
		// 			margin-left: 10px;
		// 			margin-top: 10px;
		// 			text-align: center;
		// 			line-height: $line-height-25;
		// 			color: $black_color;
		// 			font-weight: bold;
		// 			font-size: $font-size-12;
		// 		}
		// 	}

		// 	.save {
		// 		width: 95%;
		// 		height: 36px;
		// 		margin: 0 auto;
		// 		margin-top: 20px;
		// 		border-radius: $radius_30;
		// 		text-align: center;
		// 		line-height: 36px;
		// 		color: $white_color;
		// 		font-size: $font-size-14;
		// 		font-weight: bold;
		// 		background: linear-gradient(to right, #FF5A42, #F92350)
		// 	}

		// 	.top_list {
		// 		width: 95%;
		// 		height: 200px;
		// 		margin: 0 auto;
		// 		border-radius: $radius_four;
		// 		box-sizing: border-box;
		// 		padding: 10px;
		// 		overflow: auto;
		// 		scrollbar-width: none;
		// 		/* Firefox */
		// 		-ms-overflow-style: none;

		// 		/* IE10+ */
		// 		&::-webkit-scrollbar {
		// 			display: none;
		// 			/* ChromeSafari */
		// 		}

		// 		// .is_bg_active{
		// 		// 	background-color: green;
		// 		// }
		// 		.list_content {
		// 			width: 100%;
		// 			// background-color: $qgray_color;
		// 			box-sizing: border-box;
		// 			padding: 10px;
		// 			border-radius: $radius_eight;
		// 			display: flex;
		// 			margin-bottom: 10px;

		// 			.left_close {
		// 				flex: 0.1;
		// 				@include centerAline();

		// 				.close_img {
		// 					width: 30px;
		// 					height: 30px;
		// 				}
		// 			}

		// 			.middle_red {
		// 				flex: 0.55;

		// 				.dragging_num {
		// 					width: 100%;
		// 					display: flex;
		// 					flex-wrap: wrap;

		// 					.dra_item {
		// 						width: 25px;
		// 						height: 25px;
		// 						margin-left: 3px;
		// 						text-align: center;
		// 						line-height: 25px;
		// 						font-weight: bold;
		// 						background-image: url('../../static/image/z_text_ball.png');
		// 						background-size: 100% 100%;
		// 						background-repeat: no-repeat;
		// 						font-weight: bold;
		// 						font-size: $font-size-12;
		// 						color: $white_color;
		// 					}
		// 				}

		// 				.red_nums {
		// 					width: 100%;
		// 					display: flex;
		// 					flex-wrap: wrap;

		// 					.red_all_nums {
		// 						width: 25px;
		// 						height: 25px;
		// 						background-image: url('../../static/image/red_ball.png');
		// 						background-size: 95% 95%;
		// 						color: $white_color;
		// 						text-align: center;
		// 						line-height: $line-height-25;
		// 						font-weight: bold;
		// 						font-size: $font-size-12;
		// 						margin-left: 3px;
		// 						margin-top: 3px;
		// 					}

		// 				}
		// 			}

		// 			.add {
		// 				flex: 0.05;
		// 				@include centerAline();
		// 				font-size: $font-size-20;
		// 				color: $gray_color;
		// 			}

		// 			.middle_blue {
		// 				flex: 0.3;

		// 				.blue_nums {
		// 					width: 100%;
		// 					display: flex;
		// 					flex-wrap: wrap;

		// 					.blue_all_nums {
		// 						width: 25px;
		// 						height: 25px;
		// 						text-align: center;
		// 						line-height: $line-height-25;
		// 						font-weight: bold;
		// 						font-size: $font-size-12;
		// 						margin-left: 10px;
		// 						background-image: url('../../static/image/blue_ball.png');
		// 						background-size: 100% 100%;
		// 						color: $white_color;
		// 					}
		// 				}
		// 			}

		// 			.beilv {
		// 				flex: 0.1;
		// 				@include centerAline();

		// 				.beilv_content {
		// 					text-align: center;
		// 					font-weight: bold;
		// 					background-color: $primary_color;
		// 					color: $white_color;
		// 					border-radius: $radius_four;
		// 					box-sizing: border-box;
		// 					padding: 5px;
		// 				}
		// 			}
		// 		}
		// 	}

		// 	.btn_list {
		// 		width: 95%;
		// 		margin: 0 auto;
		// 		height: 60px;
		// 		box-sizing: border-box;
		// 		padding: 10px;
		// 		display: flex;
		// 		justify-content: space-around;

		// 		.btn {
		// 			width: 90px;
		// 			height: 36px;
		// 			background: linear-gradient(to right, #FF5A43, #FA2450);
		// 			border-radius: $radius_30;
		// 			text-align: center;
		// 			line-height: $line-height-36;
		// 			font-size: $font-size-14;
		// 			color: $white_color;
		// 		}
		// 	}
		// }

		.list_step {
			width: 300px;
			height: 200px;

			.step_text {
				width: 100%;
				height: 40px;
				box-sizing: border-box;
				padding: 10px;
				font-size: $font-size-20;
				color: $black_color;
				line-height: $line-height-40;
				font-weight: bold;
			}

			.step_content {
				width: 100%;
				height: 160px;
				@include centerAline();
			}
		}
	}
</style>